<template>
  <div class="content">
    <h1>添加用户</h1>
    <el-form
      :model="usersForm"
      :rules="rules"
      style="text-align: left"
      ref="usersForm"
    >
      <el-form-item label="用户名" label-width="100px" prop="username">
        <el-input v-model="usersForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="100px" prop="password">
        <el-input
          type="password"
          v-model="usersForm.password"
          show-password
        ></el-input>
      </el-form-item>

      <el-form-item label="确认密码" label-width="100px" prop="repassword">
        <el-input v-model="usersForm.repassword" show-password></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" label-width="100px" prop="realName">
        <el-input v-model="usersForm.realName"></el-input>
      </el-form-item>
      <el-form-item label="年龄" label-width="100px" prop="age">
        <el-input v-model="usersForm.age"></el-input>
      </el-form-item>
      <el-form-item label="职位" label-width="100px" prop="position">
        <el-input v-model="usersForm.position"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone" label-width="100px">
        <el-input v-model="usersForm.phone"></el-input>
      </el-form-item>
      <el-form-item class="buttons">
        <el-button @click="resetForm('usersFrom')">重置</el-button>
        <el-button type="primary" @click="onSubmit('usersForm')"
          >确 定</el-button
        >
      </el-form-item>
    </el-form>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm('usersFrom')">重置</el-button>
      <el-button type="primary" @click="onSubmit('usersForm')">确 定</el-button>
    </div> -->
  </div>
</template>
 
<script>
export default {
  name: "AddUser",
  data() {
    //验证年龄 0-100
    const validateAge = (rule, value, callback) => {
      if (!value) {
        callback(new Error("必须输入年龄"));
      }
      value = Number(value);
      if (typeof value === "number" && !isNaN(value)) {
        if (value < 0 || value > 100) {
          callback(new Error("年龄在 0 至 100 之间"));
        } else {
          callback();
        }
      } else {
        callback(new Error("年龄必须为数字"));
      }
    };
    //验证密码
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("必须输入密码"));
      }
      if (!value.match("[a-zA-Z0-9]")) {
        callback(new Error("密码由6-12个字母或者数字组成"));
      } else {
        callback();
      }
    };
    //验证密码
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
        // password 是表单上绑定的字段
      } else if (value !== this.usersForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      usersForm: {
        username: "",
        password: "",
        realName: "",
        age: "",
        phone: "",
        position: "",
        repassword: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "用户名不能为空",
          },
          { min: 5, max: 15, message: "长度在5到15个字符之间" },
        ],
        password: [
          { required: true, message: "密码不能为空" },
          { validator: validatePassword },
        ],
        realName: [
          {
            required: true,
            message: "真实姓名不能为空",
          },
          { min: 1, max: 10, message: "真实姓名在1到10个字符之间" },
        ],
        age: [
          { required: true, message: "年龄不能为空" },
          { validator: validateAge },
        ],
        position: [
          {
            required: true,
            message: "职位不能为空",
          },
          { min: 1, max: 10, message: "长度在1到10个字符之间" },
        ],
        repassword: [
          {
            required: true,
            message: "请再次输入密码",
          },
          {
            validator: validatePass2,
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
          },
          { min: 11, message: "长度为11位数" },
        ],
      },
    };
  },
  methods: {
    onSubmit(usersForm) {
      //判断是否全部验证都符合
      this.$refs.usersForm.validate((valid) => {
        if (valid) {
          console.log(this.usersForm);
          this.$request.post("/regmanage", this.usersForm).then(({ data }) => {
            if (data.status == 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
            }
          });
          //添加进数据库
        } else {
          console.log("Error Submit!!");
          return false;
        }
      });
    },
    //重置
    resetForm(usersForm) {
      this.$refs["usersForm"].resetFields();
    },
  },
};
</script>
<style scoped>
h1 {
  text-align: center;
  font-size: 33px;
  padding-top: 5%;
}
.el-form-item {
  width: 80%;
}
form {
  /* width: 30%;
  height: 50%;
  margin: 50px auto; */
  padding: 5% 15%;
}
button {
  width: 40%;
}
.buttons {
  margin-left: 15%;
}
.content {
  width: 50%;
  margin: 0 auto;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
}
</style>